<p class="leading-7 [&:not(:first-child)]:mt-6">The Filter component introduces:</p>

<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
  <li><%= code("app/helpers/components/filter_helper.rb") %></li>
  <li><%= code("app/views/components/ui/_filter.html.erb") %></li>
  <li><%= code("app/javascript/controllers/ui/filter_controller.js") %></li>
</ul>

<p class="leading-7 [&:not(:first-child)]:mt-6">
The method <%= code("render_filter") %> method accepts one mandatory argument, an array of hashes that each have a <%= code("value") %> and name <%= code("name") %>.</p>

<p class="leading-7 [&:not(:first-child)]:mt-6">
You can also use the <%= code("pattern") %> argument to provide a regular expression as a string. It requires the placeholder <%=code("{input}") %> to dynamically insert a term into the regex. By default, it is set to <%=code("^{input}") %>, meaning the input term will match only at the beginning of a string. Ensure <%=code("{input}") %> is included in custom patterns to maintain proper functionality.
</p>


<p class="leading-7 [&:not(:first-child)]:mt-6">You can optionally also call <%= code("filter_icon") %> within a block passed to <%= code("render_filter") %> to render an icon to the left of the filter input.</p>

<p>This component gets used in the Combobox and Command components as well as potentially others.</p>
